import { addInsuranceBlack, editInsuranceBlack, exportInsuranceBlackList, getInsuranceBlackList } from '@/api/insurance/black'
import type { BlackDto } from '@/api/insurance/black/types'
import type { PageDto } from '@/api/types'
import renderModal, { getModelValue, initModelValue, type FormModalDto } from '@/components/modal/Modal'
import type { FilterDto } from '@/render/FilterRender'
import TableRender, { renderSlotButtons, type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import toNative from '@/utils/toNative'
import { downloadFile } from '@/utils/util'
import { message } from 'ant-design-vue'
import { Component } from 'vue-facing-decorator'

@Component
export class CompanyBlack extends TableRender {
    type = 0
    listType = 1
    formConfig = this.initFormConfig() as FormModalDto
    filterConfig() {
        return {
            name: {
                name: '名称',
                element: 'input'
            }
        } as FilterDto
    }
    tableColumnConfig() {
        return [
            {
                field: 'name',
                title: '客户名',
            },
            {
                field: 'createUserName',
                title: '录入人',
            },
            {
                field: 'type',
                title: '产品类型',
                formatter: ({row}) => {
                    return (row.type === 0 || row.type === 1) ? '日日保' : '长期保'
                }
            },
            {
                field: 'reason',
                title: '录入原因',
            },
            {
                field: 'fileUrl',
                title: '图片',
                slots: {
                    default: 'image'
                }
            },
            {
                field: 'createTime',
                title: '录入时间',
            },
            {
                field: 'operate',
                title: '操作',
                width: 160,
                fixed: 'right',
                params: {
                    buttons: renderSlotButtons(this)
                },
                slots: {
                    default: 'buttons'
                }
            }
        ] as TableRenderColumnTypes<BlackDto>
    }
    initFormConfig() { 
        return {
            title: '',
            width: '600px',
            theme: 'light',
            show: false,
            labelCol: {
                style: {
                    width: '160px'
                }
            },
            items: {
                id: {
                    name: '',
                    element: 'none',
                    hidden: true
                },
                type: {
                    name: '类别',
                    element: 'radioGroup',
                    placeholder: '请输入报案公司名称',
                    readonly: true,
                    options: [
                        {
                            label: '客户',
                            value: 0
                        },
                        {
                            label: '派遣单位',
                            value: 1
                        },
                        {
                            label: '投保人员',
                            value: 2
                        },
                    ],
                    required: true
                },
                productType: {
                    name: '产品类型',
                    element: 'radioGroup',
                    placeholder: '请选择产品类型',
                    options: [
                        {
                            label: '长期保',
                            value: 1
                        },
                        {
                            label: '日日保',
                            value: 0
                        }
                    ],
                    required: true
                },
                isRetainReportCaseUser: {
                    name: '是否保留出险人员',
                    element: 'radioGroup',
                    options: [
                        {
                            label: '保留',
                            value: 1
                        },
                        {
                            label: '不保留',
                            value: 0
                        }
                    ],
                    required: true
                },
                name: {
                    name: '客户名称',
                    element: 'autoComplete',
                    placeholder: '请输入公司名称',
                    optionsType: 'company',
                    required: true
                },
                reason: {
                    name: '录入原因',
                    element: 'textarea',
                    placeholder: '请输入录入原因',
                    optionsType: 'company',
                    required: true
                },
                file: {
                    name: '上传附件',
                    element: 'upload',
                    required: true,
                    params: {
                        base64: true,
                        listType: 'picture-card',
                        accept: '.png,.jpg,.jpeg',
                        suffix: (
                            <div class="text-sm text-gray">
                                大小限制5MB，支持png、jpeg、jpg格式文件
                            </div>
                        )
                    }
                },
            },
            complete: async () => {
                const value = getModelValue(this.formConfig)
                if (!value.id) {
                    await addInsuranceBlack({
                        ...value,
                        file: value.file[0] || ''
                    })
                } else {
                    await editInsuranceBlack({
                        ...value,
                        file: value.file[0] || ''
                    })
                }
                message.success('操作成功')
                this.formConfig.show = false
                this.reloadPage()
            },
            cancel: () => {},
        } as FormModalDto

    }
    
    async onExport() {
        const name = await exportInsuranceBlackList({
            type: this.type,
            ...this.getFilters()
        })
        await downloadFile(name)
        message.success('导出成功')
    }

    onAdd() {
        this.formConfig.title = '新增黑名单'
        this.formConfig.show = true
        this.formConfig.items.productType.readonly = false
        this.formConfig.items.name.readonly = false
        initModelValue(this.formConfig, {
            type: this.type
        })
    }

    onEdit(row: BlackDto) {
        console.log(row)
        this.formConfig.title = '黑名单编辑'
        this.formConfig.show = true
        this.formConfig.items.productType.readonly = true
        this.formConfig.items.name.readonly = true
        initModelValue(this.formConfig, {
            ...row,
            type: this.type,
            productType: (row.type === 0 || row.type === 1) ? 0 : 1,
            file: row.fileUrl ? [row.fileUrl] : []
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getInsuranceBlackList({
            type: this.listType,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return <>
            {super.render()}
            {renderModal(this.formConfig)}
        </>
    }
}

export default toNative(CompanyBlack)